<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../../CSS/reset.css">
    <style>
        /* 
        自己实现的效果真的太随意了 
        
        首先：
            - 整体有一个白色的框；
            - 每个div里面有固定的一个高度；
        */

        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #bfa;
        }

        /* 分不清是写margin还是padding?? */
        .left-nav {
            background-color: #fefefe;
            width: 190px;
            height: 450px;
            /* border: 1px solid black; */
            margin: 50px auto;
            padding: 10px 0px;

        }

        .item {

            /* 如果item的宽度指定了，因为设置了padding-left:18px;所以item的整个宽度就会往外挤出来； 用box-sizing: border-box;
            但是如果item 没有设置宽度，即width：auto；则因为设置了padding-left:18px;item的整个看宽度就会往里面挤；
             */

            width: 190px;
            height: 25px;
            /*！！！ 文字在元素里垂直居中 
                要让文字在父元素里面垂直居中，只需要将父元素的行高设置为和父元素一样的值；
             */
            line-height: 25px;

            /* ！！！若给item设置margin-left: 18px;则item每一条都向右移动了18px,左边空出来的白色部分就不是item的值了；所以要用 padding-left: 18px;
          */
            padding-left: 18px;
            /* padding 和border 是包含在content里面的 */
            box-sizing: border-box;
            font-size: 12px;
        }

        /* 为每一个item设置鼠标移入后 显示item的背景颜色的状态 */
        .item:hover {
            background-color: rgb(227, 223, 223);

        }

        a {
            color: #333;
            font-size: 14px;
            text-decoration: none;

        }

        /* 为a设置 鼠标移入后显示a的背景颜色 */
        a:hover {
            color: red;
        }

        /* .out {
            background-color: #fefefe;
            width: 190px;
            height: 470px;
            border: 1px solid black;
        } */

        /* p {
            padding: 2px;
            padding-left: 10px;
        } */
    </style>
</head>

<body>
    <!-- 可以用语义化标签 -->
    <nav class="left-nav">
        <div class="item">
            <a href="#">家用电器</a>
        </div>

        <div class="item">
            <a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>
        </div>

        <div class="item">
            <a href="#">电脑</a>/<a href="#">办公</a>
        </div>

        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
        <div class="item">
            <a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a>
        </div>
    </nav>
    <!-- <div class="out">
        <p>家用电器</p>
        <p>手机/运营商/数码</p>
        <p>电脑/办公</p>
        <p>家居/家具/家装/厨具</p>
        <p>男装/女装</p>
        <p>手机/运营商/数码</p>
        <p>电脑/办公</p>
        <p>家居/家具/家装/厨具</p>
        <p>男装/女装</p>
        <p>手机/运营商/数码</p>
        <p>电脑/办公</p>
        <p>家居/家具/家装/厨具</p>
        <p>男装/女装</p>
        <p>手机/运营商/数码</p>
        <p>电脑/办公</p>
        <p>家居/家具/家装/厨具</p>
        <p>男装/女装</p>
    </div> -->


</body>

</html>